<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/mui.min.css">
    <style>
        body{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<!-- 侧滑导航根容器 -->
<div id="app" class="mui-off-canvas-wrap mui-draggable">
    <!-- 菜单容器 -->
    <aside class="mui-off-canvas-left">
        <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
                <!-- 菜单具体展示内容 -->
                <div style="font-size: 2em;text-align: center;margin-top: 20px;margin-bottom: 20px;color: white;">导航栏</div>
                <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            等级
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            签到
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            浏览记录
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            我的书架
                        </a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a class="mui-navigate-right">
                            充值
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>
    <!-- 主页面容器 -->
    <div class="mui-inner-wrap">
        <!-- 主页面标题 -->
        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
            <h1 class="mui-title">主页</h1>
        </header>
        <div class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!-- 主界面具体展示内容 -->
                <!--轮播-->
                <div class="mui-slider" style="margin-bottom: 0">
                    <div class="mui-slider-group mui-slider-loop">
                        <!--支持循环，需要重复图片节点-->
                        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/4.jpg" /></a></div>
                        <div class="mui-slider-item"><a href="#"><img src="img/1.jpg" /></a></div>
                        <div class="mui-slider-item"><a href="#"><img src="img/2.jpg" /></a></div>
                        <div class="mui-slider-item"><a href="#"><img src="img/3.jpg" /></a></div>
                        <div class="mui-slider-item"><a href="#"><img src="img/4.jpg" /></a></div>
                        <!--支持循环，需要重复图片节点-->
                        <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="img/1.jpg" /></a></div>
                    </div>
                </div>

                <!--九宫格-->
                <div class="mui-content" style="margin-top: 0">
                    <ul class="mui-table-view mui-grid-view mui-grid-9">
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-location"></span>
                            <div class="mui-media-body">location</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-search"></span>
                            <div class="mui-media-body">Search</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-phone"></span>
                            <div class="mui-media-body">Phone</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-gear"></span>
                            <div class="mui-media-body">Setting</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-info"></span>
                            <div class="mui-media-body">about</div></a></li>
                        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-more"></span>
                            <div class="mui-media-body">more</div></a></li>
                    </ul>
                </div>

                <!--文章列表-->
                <ul class="mui-table-view">
                    <li class="mui-table-view-cell mui-media">
                        <a href="javascript:;">
                            <img class="mui-media-object mui-pull-left" src="img/1.jpg">
                            <div class="mui-media-body">
                                幸福
                                <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="javascript:;">
                            <img class="mui-media-object mui-pull-left" src="img/2.jpg">
                            <div class="mui-media-body">
                                木屋
                                <p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="javascript:;">
                            <img class="mui-media-object mui-pull-left" src="img/3.jpg">
                            <div class="mui-media-body">
                                CBD
                                <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                            </div>
                        </a>
                    </li>
                    <li class="mui-table-view-cell mui-media">
                        <a href="javascript:;">
                            <img class="mui-media-object mui-pull-left" src="img/4.jpg">
                            <div class="mui-media-body">
                                CBD
                                <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                            </div>
                        </a>
                    </li>
                </ul>

                <!--结尾-->
                <div style="font-size: 0.5em;text-align: center;margin-top: 20px;margin-bottom: 20px;color: #8f8f94;">
                    -----没了喔-----
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script src="js/jquery/jquery-3.3.1.js"></script>
<script src="js/vue/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data:{

        },
        methods:{
            slider(){
                //获得slider插件对象
                var gallery = mui('.mui-slider');
                gallery.slider({
                    interval:2000//自动轮播周期，若为0则不自动播放，默认为0；
                });
            }
        },
        mounted:function () {
            this.slider();
        }
    });
</script>
</html>